<template>
  <div class="chat-msg" :style="chatMsgStyle">
    <div class="avatar-wrap" :style="avatarWrapStyle">
      <van-image :src="avatar" radius="8" class="avatar" />
    </div>
    <div class="chat-info">
      <div class="chat-box" :style="chatBoxStyle" v-if="['text', 'audio', 'file'].includes(type)">
        <div class="chat-arrow-r" v-if="isMySelf"></div>
        <div class="chat-arrow-l" v-if="!isMySelf"></div>
        <div class="content">
          <div class="text" v-if="type === 'text'" v-html="content"></div>
          <div class="audio" v-if="type === 'audio'" @click="play">
            <span>{{ audioDuration }}</span>
            <svg-icon class="icon" icon="wifi"></svg-icon>
            <audio :src="content" ref="audio"></audio>
          </div>
          <div class="file" v-if="type === 'file'">
            <div class="file-info">
              <div class="file-desc">
                <div class="file-name">{{ content }}</div>
                <div class="file-size">567.2 KB</div>
              </div>
              <div class="file-icon">
                <svg-icon icon="file-zip"></svg-icon>
              </div>
            </div>

            <van-progress :percentage="50" />
          </div>
        </div>
      </div>
      <div class="image" v-if="type === 'image'">
        <!-- <van-image
          class="chat-image"
          :src="content"
          fit="scale-down"
          radius="8"
          @load="imageLoad"
          @click="$emit('show-image',content)"
        /> -->
        <img :src="content" class="chat-image" preview="1" @load="imageLoad" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ChatMsgItem',
  props: {
    avatar: String,
    // name: String,
    type: String,
    content: String,
    size: Number,
    duration: [Number, String],
    isMySelf: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      myMsgBg: '#97EB62',
      otherMsgBg: '#FDFDFD'
    }
  },
  computed: {
    chatMsgStyle() {
      return { flexDirection: this.isMySelf ? 'row-reverse' : 'row' }
    },
    avatarWrapStyle() {
      return this.isMySelf ? { marginLeft: '10px' } : { marginRight: '10px' }
    },
    chatBoxStyle() {
      return { backgroundColor: this.isMySelf ? this.myMsgBg : this.otherMsgBg }
    },
    audioDuration() {
      const time = Math.ceil(Number(this.duration) / 1000)
      return time ? time + "''" : ''
    }
  },
  mounted() {},
  destroyed() {
    // this.revokeObjectURL()
  },
  methods: {
    play() {
      const audio = this.$refs.audio
      if (!audio.currentTime) {
        audio.play()
      } else {
        audio.pause()
        audio.currentTime = 0
      }
    },
    getAudioTime() {
      const audio = this.$refs.audio
      if (audio) {
        Math.ceil(audio.duration)
      }
    },
    imageLoad(e) {
      this.$emit('image-load')
    },
    revokeObjectURL() {
      if (this.type === 'image') {
        (window.URL || window.webkitURL).revokeObjectURL(this.content)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
$msg-bg-color: #97eb62;
$other-msg-bg-color: #fdfdfd;
$mr: 10px;
$chat-box-pad: 10px;
$avatar-size: 50px;
.chat-msg {
  margin-bottom: 10px;
  display: flex;
  .avatar-wrap {
    width: $avatar-size;
    height: $avatar-size;
    .avatar {
      width: $avatar-size;
      height: $avatar-size;
    }
  }
  .chat-info {
    .chat-box {
      position: relative;
      min-height: $avatar-size;
      padding: $chat-box-pad;
      // outline: 1px solid red;
      line-height: $avatar-size - 2 * $chat-box-pad;
      font-size: 16px;
      border-radius: 4px;
      // background-color: $msg-bg-color;
      box-sizing: border-box;
      color: #000;
      // max-width: calc(100vw - $padding-side*2 - $avatar-size*2 - $mr*2);
      max-width: calc(100vw - 130px);
      font-weight: 500;
      .chat-arrow-l {
        position: absolute;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        border-width: 6px;
        border-right-color: $other-msg-bg-color;
        border-left-width: 0;
        left: -5px;
        top: 19px;
      }
      .chat-arrow-r {
        position: absolute;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        border-width: 6px;
        border-left-color: $msg-bg-color;
        border-right-width: 0;
        right: -5px;
        top: 19px;
      }
      .text {
        word-break: break-all;
      }
      .audio {
        width: 100px;
        text-align: right;
        color: $gray-7;
        .icon {
          transform: rotate(-90deg);
        }
      }
      .file {
        .file-info{
          display: flex;
          .file-desc {
            margin-right: 10px;
            flex: 1;
            @include textoverflow(2);
            .file-size {
              font-size: $font-size-sm;
              color: $gray-6;
            }
          }
          .file-icon {
            font-size: 40px;
          }
        }
      }
    }
    .image {
      max-width: 200px;
      max-height: 400px;
      overflow: hidden;
      .chat-image {
        max-width: 200px;
        max-height: 400px;
        border-radius: 8px;
      }
    }
  }
}
</style>
